<template>
  <div>
    <el-container>
      <el-header height="150">
        <div style="width: 100%;height: 20px;margin-top: 0px;margin-bottom:10px;line-height: 20px">
          <div v-if="user==null">
          <span style="margin-left: 900px">
            <a href="/login">登录</a><el-divider direction="vertical"></el-divider>
               <a href="/order">订单</a><el-divider direction="vertical"></el-divider>
          <a href="/shoppingCart">购物车</a><el-divider direction="vertical"></el-divider>
          <a href="javascript:void(0)" @click="logout()">退出</a>
          </span>
            </div>
            <div v-else>
              <span style="margin-left: 900px">
               <a href="/order">订单</a><el-divider direction="vertical"></el-divider>
          <a href="/shoppingCart">购物车</a><el-divider direction="vertical"></el-divider>
          <a href="javascript:void(0)" @click="logout()">退出</a>
                </span>
            </div>
        </div>
        <div style="width: 1200px;height:100px;margin: 0 auto">
          <div style="float: left">
            <a href="/">
              <img src="../../assets/imgs/logo.png" style="width: 300px;vertical-align: middle" alt="">
            </a>
          </div>
          <!--搜索框开始-->
          <div style="float: right; margin-top: 30px">
            <!--@keydown.native.enter 设置回车键按下事件-->
            <el-input v-model="keywords" @keydown.native.enter="search()" placeholder="请输入搜索内容">
              <!--slot="append"作用是将按钮追加在搜索框的后面-->
              <el-button @click="search()" slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
          <!--搜索框结束-->
        </div>
        <!--蓝色导航菜单开始-->
        <div style="background-color: #82c8ec;height: 60px;">
          <el-menu style="width: 100%"
                   @select="handleSelect"
                   class="el-menu-demo"
                   mode="horizontal"
                   background-color="#82c8ec"
                   text-color="#fff"
                   active-text-color="#fff">
            <el-menu-item style="margin-left:160px;font-size: 20px" v-for="b in brandArr" :index="b.name+''">{{b.name}}</el-menu-item>
          </el-menu>
        </div>
        <!--蓝色导航菜单结束-->
      </el-header>
      <el-main style="width: 1200px;margin: 0 auto">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card>
              <img :src="require('D:/files/'+phone.url)" width="100%" alt="">
            </el-card>
          </el-col>
          <el-col :span="12">
            <p style="font-size: 25px">{{phone.name}}</p>
            <el-divider></el-divider>
            <p style="font-size: 15px;color: #666">
              销量:{{phone.sales}} 浏览量:{{phone.viewCount}}</p>
            <p style="font-size: 25px;font-weight: bold">￥{{phone.price}}
              <span style="font-size: 15px;color: #666">原价:
                            <s>{{phone.oldPrice}}</s>
                        </span>
            </p>
            <el-divider></el-divider>

            <!--商品加入购物车部分-->

            <div >

                <el-row>
                <span>选择颜色  {{phone.colors.color}}</span>
                <div v-for=" c in phone.colors">
                <el-button style="float: left; margin-left: 10px " @click="selectImage(c)">{{c.color}}</el-button>
                </div>
              </el-row>
              <el-row>
                <span>选择版本  {{phone.details.version}}</span>
                <div v-for="d in phone.details">
                <el-button style="float: left; margin-left: 10px" @click="selectPrice(d)"> {{d.version}}</el-button>
                </div>
              </el-row>
              <el-row style="text-align: center">
                <el-button type="danger" @click="addCart(phone)">添加购物车</el-button>
                <el-dialog
                    title="购物车"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">
                  <span>你要购买手机的信息：</span><br>
                  <span>名称：{{phone.name}}</span><br>
                  <span>颜色：{{phone.colors.color}}</span><br>
                  <span>价格：{{phone.price}}</span><br>
                  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取消添加购物车</el-button>
    <el-button type="primary"  @click="commitAdd(phone)">添加购物车</el-button>
  </span>
                </el-dialog>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-main>
      <el-footer>
        <div style="height: 95px;background-image: url('../../assets/imgs/wave.png');margin-bottom: -30px"></div>
        <div style="height: 100px;/*background-color: #3f3f3f;*/
            padding: 30px;text-align: center;color: #b1b1b1">
          <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
          <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
          <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "DatailView",
  data() {
    return {//在这里面定义变量
      phone:{},
      brandArr: [],
      keywords:"",
      id:"",
      user:null,
      dialogVisible: false
    }
  },

  mounted(){
    let url ='http://localhost:9081'
    this.axios.get(url+"/brands/brandList").then((response) => {
      this.brandArr = response.data.data;
    })
    //通过商品的id查询详细信息

    let id = location.search.split("=")[1];
    console.log(id)
    let url1 = url+"/phones/list/"+id
    this.axios.get(url1).then((response) => {
      console.log(url1);
      this.phone = response.data.data;
      console.log(this.phone);
    })

    //发请求获取当前客户端登录的用户对象
    this.axios.get(url+'/users/currentUser').then((res) =>{
      this.user=res.data;
      //如果没有登录得到的是""空字符串
      if(res.data==""){
        this.user=null;
      }
    })
  },
  methods:{
    commitAdd(phone){
      this.dialogVisible = false;
      this.axios.post("http://localhost:9081/carts/add-new",phone).then((res) =>{
        this.$notify({
            title: '成功',
            message: '添加成功！',
            type: 'success'
          });
      })
    },
    addCart(phone){
      if (phone.colors.color == null || phone.details.version == null ){
        this.dialogVisible = false;
         this.$notify.error({
           title:"错误",
           message:"未选择颜色或版本"
         })
      }else {
        this.dialogVisible = true;
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    selectImage(c){
      this.phone.url =c.url;
      this.phone.colors.color = c.color;
    },
    selectPrice(d){
      this.phone.price =d.price;
      this.phone.details.version = d.version;
    },
    logout(){
      if (confirm("您确认退出登录吗?")){
        let url ='http://localhost:9081/users/logout'
        this.axios.post(url).then(function () {
          location.href="/";//回到首页
        })
      }
    },
    handleSelect(index){
      console.log("index="+index);
      location.href="/result?index="+index;
    },
    search(){
      location.href="/result?keywords="+this.keywords;
    }
  }
}
</script>

<style>
body{
  background-color: white;
}
header a {
  text-decoration: none;
  color: #6c6c6c;
}
a:hover{
  color: red;
}
.el-menu.el-menu--horizontal {
  border-bottom: none;
}
.el-table .el-table__cell{
  padding: 0;/*去掉排行榜表格中上下的内边距*/
}
</style>